<!DOCTYPE html>
<html>

<head>
    <title> Conditional Rendering</title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    /*
    Way 3 : Inline If with Logical && Operator
    */
    function Mailbox(props) {
        const unreadMessage = props.unreadMessage;
        // const count = 0;
        const count = 2;

        if (count) {
            console.log("count 0 is true");
        }
        return (
            <div>
                <h1>Hi, </h1>

                {/** true && expression */}
                {unreadMessage.length > 0 &&
                    <h2>  You have {unreadMessage.length} unread message.</h2>
                }

                {/** false && expression **/}
                {unreadMessage.length < 0 &&
                    <h2>  You not have unread message.</h2>
                }

                {/** Wrong use */}
                {count && <h1>Message : {count}</h1>}
            </div>
        );


    }

    // const messages = ['React', 'HTML', 'Redux'];
    const messages = [];
    ReactDOM.render(<Mailbox unreadMessage={messages} />, document.getElementById('root'));
</script>